<template>
	<div class="category_main">
		<!-- 搜索 -->
		<div class="search" @click="toSearch">
			<div class="ser">
				<input type="text" placeholder="搜索商品" />
				<span class="icon"></span>
			</div>
		</div>
		<!-- 头部总菜单栏 -->
		<div class="head_nav">
			<scroll-view scroll-x="true" class="head" :scroll-left="scrollLeft">
		        <div v-for="(item,index) in headNavList" :key="index"
		        	  :class="[index===nowHeadIndex ? 'head-active' : '']"
		        	  @click="changeLeft(item.id,index)">
					{{item.name}}
		        </div>       
		    </scroll-view>
		</div>
		<!-- 子菜单和内容 -->
		<div class="contents">
			<!-- 左边菜单栏 -->
			<scroll-view class="left_nav" scroll-y="true">
				<div v-for="(item,index) in leftNavList" :key="index"
					  :class="[index===nowChildIndex ? 'child-active' : '']"
					  @click="changeRight(item.id,index)">
					{{item.name}}
				</div>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view class="right_content" scroll-y="true">
				<div class="list">
					<div class="item" v-for="(item,index) in infoList" :key="index"
						 @click="goodsDetail(item.id)">		      	
			        	<img :src="item.list_pic_url" alt="">
			        	<div>
			        		<p class="name">{{item.name}}</p>
			        		<p class="brief">{{item.goods_brief}}</p>
			        		<p class="price">¥ {{item.retail_price}}</p>	
			        	</div>	        		      	
		    		</div>	 
				</div>
			</scroll-view>
		</div>
	</div>
</template>

<script type="text/javascript">
import {get} from '@/util'
export default {
	data() {
		return {
			scrollLeft: 0, 
			headNavList:[],//头部总分类
			leftNavList:[],//左边子分类菜单栏数据
			infoList:[], //右边分类内容
			categoryId:'',
			nowHeadIndex:0,
			nowChildIndex:0
		}
	},
	mounted() {
		// this.headData()
		this.getNavData()
	},
	methods: {
		toSearch(){
	    	wx.navigateTo({
	        	url: '/pages/search/main'
	     	})
	    },
	    
		async getNavData(){
			//头部分类信息
			const headData = await get('/app/category/headData')
			this.headNavList = headData.headNav
			//默认取出头部分类中的第一个分类下的全部子分类信息
			const oneHeadData = await get('/app/category/childData',{
				categoryId: this.headNavList[0].id
			})
			this.leftNavList = oneHeadData.childNav
			// 默认取出第一个二级分类下的全部商品信息
			const oneChildData = await get('/app/category/infoData',{
				categoryId: this.leftNavList[0].id
			})
			this.infoList = oneChildData.infoList
		},

		// 点击头部分类获取左边子分类信息
		async changeLeft(id,index){
			this.nowHeadIndex = index //当前所点击的一级分类菜单下标
			this.nowChildIndex = 0  //将当前二级分类的下标默认为0
			const leftData = await get('/app/category/childData',{
				categoryId: id  //分类id
			})
			this.leftNavList = leftData.childNav
			// 再次获取第一个子分类下的商品信息
			const oneChildData = await get('/app/category/infoData',{
				categoryId: this.leftNavList[0].id
			})
			this.infoList = oneChildData.infoList
			// 让导航栏滚动到可见区域
      		if (this.nowHeadIndex >3) {
        		this.scrollLeft = this.nowHeadIndex * 60
      		} else {
        		this.scrollLeft = 0
      		}
		},
		// 点击子分类获取该子分类下的所有商品信息
		async changeRight(id,index){
			this.nowChildIndex = index
			const infoData = await get('/app/category/infoData',{
				categoryId:id
			})
			this.infoList = infoData.infoList
		},
		//跳转到商品详情页面
   	 	goodsDetail (id) {
      		wx.navigateTo({
        		url: '/pages/goods/main?id=' + id
      		});
    	}
	}
}
</script>

<style lang="scss">
@import "./category.scss";
</style>